export default {
    name: "addwymb",
    setup(props, { emit }) {
        const router = VueRouter.useRouter();
        const route = VueRouter.useRoute();
        const activeTab = ref('basic');
        const formData = ref({
            id: null,
            name: '',
            is_default: false,
            config: {
                header: {
                    image: '',
                    height: 120
                },
                background: {
                    image: '',
                    opacity: 0.8
                },
                title: {
                    font_size: 18,
                    color: '#333'
                },
                button: {
                    text: '查 询',
                    color: '#fff',
                    bg_color: '#409EFF',
                    font_size: 16,
                    radius: 4,
                    padding: '12px 24px', // 修正单位转换
                    width: 220,
                    height: 100
                }
            }
        })
        const id = ref()
        const formRef = ref()
        const rules = reactive({
            name: [{
                required: true,
                message: '请输入模板名称',
                trigger: 'blur'
            }],
            'config.button.text': [{
                required: true,
                message: '请输入按钮文字',
                trigger: 'blur'
            }]
        })

        onMounted(() => {
            id.value = route.query.id;
            if(id.value) {
                loadTemplate();
            }
        })

        // 读取模板
        const loadTemplate = async () => {
            const res = await getwymbforid({id: id.value});
            formData.value = { ...res };
        }

        // 计算属性
        const previewStyle = computed(() => ({
            backgroundImage: formData.value.config.background.image ?
                `linear-gradient(rgba(255,255,255,${formData.value.config.background.opacity}), rgba(255,255,255,${formData.value.config.background.opacity + 0.1})), url(${formData.value.config.background.image})` : '',
            backgroundSize: 'cover'
        }));

        const titleStyle = computed(() => ({
            fontSize: `${formData.value.config.title.font_size}px`,
            color: formData.value.config.title.color
        }));

        const buttonStyle = computed(() => ({
            color: formData.value.config.button.color,
            fontSize: `${formData.value.config.button.font_size}px`,
            backgroundColor: formData.value.config.button.bg_color,
            borderRadius: `${formData.value.config.button.radius}px`,
            padding: formData.value.config.button.padding,
            width: `${formData.value.config.button.width}px`
        }));

        // 提交和重置方法
        const submit = async () => {
            try {
                await formRef.value.validate()
                id.value ? await updatewymb(formData.value) : await addwymb(formData.value);
                ElMessage.success('保存成功');
                router.back();
            } catch (error) {
                ElMessage.error('表单验证失败')
            }
        }

        const reset = () => {
            formRef.value.resetFields()
            if(id.value) loadTemplate()
        }
        
        return {
            formData,
            id,
            rules,
            formRef,
            previewStyle,
            titleStyle,
            buttonStyle,
            submit,
            reset,
            activeTab,
        }
    },
    
    template: `
	<div class="container">
		<div class="main-layout">
			<!-- 左侧表单区域 -->
			<el-tabs v-model="activeTab" type="card" class="config-tabs">
				<el-tab-pane label="基础设置" name="basic">
					<el-card class="section-card">
						<template #header>
							<div class="card-header">基础设置</div>
						</template>
						<el-scrollbar>
                            <el-form ref="formRef" :model="formData" :rules="rules">
                            	<el-form-item label="模板名称" prop="name">
                            		<el-input v-model="formData.name" placeholder="请输入模板名称" />
                            	</el-form-item>
                            	<el-form-item label="默认模板">
                            		<el-switch v-model="formData.is_default" />
                            	</el-form-item>
                            </el-form>
                            
                            <el-form-item label="表头图片">
                                <imgpicker v-model="formData.config.header.image" />
                            </el-form-item>
                            <el-form-item label="表头高度(px)">
                            	<el-input-number v-model="formData.config.header.height" :min="0" :max="500" controls-position="right" />
                            </el-form-item>
                            
                            <el-form-item label="背景图片">
                                <imgpicker v-model="formData.config.background.image" />
                            </el-form-item>
                            <el-form-item label="背景透明度">
                            	<el-slider v-model="formData.config.background.opacity" :format-tooltip="val => Math.round(val * 100) + '%'" :step="0.1" :min="0" :max="1" show-input />
                            </el-form-item>
						</el-scrollbar>
					</el-card>
				</el-tab-pane>

				<el-tab-pane label="样式设置" name="style">
					<el-card class="section-card">
						<template #header>
							<div class="card-header">样式配置</div>
						</template>

						<el-scrollbar>
							<div class="config-group">
								<h4 class="group-title">标题样式</h4>
								<el-form-item label="标题大小">
									<el-input-number v-model="formData.config.title.font_size" :min="12" :max="48"
										controls-position="right" />
								</el-form-item>
								<el-form-item label="标题颜色">
									<el-color-picker v-model="formData.config.title.color" />
								</el-form-item>
							</div>

							<div class="config-group">
								<h4 class="group-title">按钮样式</h4>
								<el-form-item label="按钮文字" prop="config.button.text">
									<el-input v-model="formData.config.button.text" />
								</el-form-item>
								<el-form-item label="文字颜色">
									<el-color-picker v-model="formData.config.button.color" />
								</el-form-item>
								<el-form-item label="背景颜色">
									<el-color-picker v-model="formData.config.button.bg_color" />
								</el-form-item>
								<el-form-item label="文字大小(px)">
									<el-input-number v-model="formData.config.button.font_size" :min="12" :max="24"
										controls-position="right" />
								</el-form-item>
								<el-form-item label="按钮圆角(px)">
									<el-input-number v-model="formData.config.button.radius" :min="0" :max="50"
										controls-position="right" />
								</el-form-item>
								<el-form-item label="按钮宽度(px)">
									<el-input-number v-model="formData.config.button.width" :min="80" :max="1000"
										controls-position="right" />
								</el-form-item>
								<el-form-item label="按钮高度(px)">
									<el-input-number v-model="formData.config.button.height" :min="20" :max="200"
										controls-position="right" />
								</el-form-item>
							</div>
						</el-scrollbar>
					</el-card>
				</el-tab-pane>
			</el-tabs>

		<!-- 右侧预览区域 -->
			<el-card class="section-card preview-card">
				<template #header>
					<div class="card-header">实时预览</div>
				</template>
				<div :style="previewStyle" style="height:600px;">
					<img v-if="formData.config.header.image" :src="formData.config.header.image" :style="{ height: formData.config.header.height + 'px' }" class="preview-header" />
					<div class="preview-title" :style="titleStyle">
						{{ formData.name || '模板标题' }}
					</div>

					<el-form label-position="top">
						<el-form-item label="姓名">
							<el-input placeholder="请输入姓名"></el-input>
						</el-form-item>
					</el-form>
					<div class="preview-remark">这是查询的备注内容</div>
					<div style="text-align:center;">
						<el-button class="preview-btn" :style="buttonStyle">
							{{ formData.config.button.text || '查 询' }}
						</el-button>
					</div>
				</div>
			</el-card>
		</div>

		<div class="footer-actions">
			<el-button type="primary" @click="submit">保存配置</el-button>
			<el-button @click="reset">重置修改</el-button>
		</div>
	</div>
    `
}